<template>
  <div class="container">
    <!-- pageStart -->
    <headers title="奖项设置" />
    <top title="奖项设置" />
    <div class="cont">
      <div class="list">
        <div class="prise">一等奖</div>
        <input v-model="group_edit.prize_1" type="text" class="type name">
        <div class="num">
          <span @click="showNumHandler('prize_1_num')">({{ group_edit.prize_1_num }})</span>
          <span class="show">份/日</span>
        </div>
      </div>

      <div class="list">
        <div class="prise">二等奖</div>
        <input v-model="group_edit.prize_2" type="text" class="type name">
        <div class="num">
          <span @click="showNumHandler('prize_2_num')">({{ group_edit.prize_2_num }})</span>
          <span class="show">份/日</span>
        </div>
      </div>

      <div class="list">
        <div class="prise">三等奖</div>
        <input v-model="group_edit.prize_3" type="text" class="type name">
        <div class="num">
          <span @click="showNumHandler('prize_3_num')">({{ group_edit.prize_3_num }})</span>
          <span class="show">份/日</span>
        </div>
      </div>

      <div class="gz-wz">使用规则描述</div>
      <textarea v-model="baseInfo.rule" class="list rule" />

      <div class="list convert">
        <div class="prise">兑奖开始日期</div>
        <div class="type" @click="showTimeStart = true">
          {{ baseInfo.redeem_start }}
          <img src="@/assets/select.png" class="select" @click="showTime=true">
        </div>
      </div>

      <div class="list convert">
        <div class="prise">兑奖截止日期</div>
        <div class="type" @click="showTimeEnd = true">
          {{ baseInfo.redeem_end }}
          <img src="@/assets/select.png" class="select" @click="showTime=true">
        </div>
      </div>

      <div class="next-btn" @click="submit(`time`)">下一步,时段选择</div>

    </div>
    <!-- 数字picker -->
    <van-popup v-model="showNum" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns_num"
        :default-index="0"
        @confirm="onConfirm_num"
      />
    </van-popup>
    <!-- 开始时间picker -->
    <van-popup v-model="showTimeStart" position="bottom">
      <van-datetime-picker
        show-toolbar
        type="date"
        :min-date="new Date()"
        @cancel="showTimeStart = false"
        @confirm="onConfirm_start"
      />
    </van-popup>
    <!--  结束时间picker -->
    <van-popup v-model="showTimeEnd" position="bottom">
      <van-datetime-picker
        show-toolbar
        type="date"
        :min-date="new Date()"
        @cancel="showTimeEnd = false"
        @confirm="onConfirm_end"
      />
    </van-popup>
    <!-- pageEnd -->
  </div>
</template>
<script>
import { Toast } from 'vant'
import headers from '@/components/header'
import top from '@/components/top'
export default {
    components: { headers, top },
    data() {
        return {
            group_edit: {
                prize_1: '',
                prize_2: '',
                prize_3: '',
                prize_1_num: 1,
                prize_2_num: 1,
                prize_3_num: 1,
                now_edit: ''
            },
            baseInfo: {
                prize_1: '',
                prize_2: '',
                prize_3: '',
                rule: '',
                redeem_start: '',
                redeem_end: '',
                day: '',
                definite_day: '',
                amount: ''
            },
            showNum: false,
            showTimeStart: false,
            showTimeEnd: false
        }
    },
    computed: {
        columns_num() {
            const arr = []
            for (let i = 1; i < 100; i++) {
                arr.push(i)
            }
            return arr
        }
    },
    watch: {
        group_edit: {
            handler(val) {
                this.baseInfo.prize_1 = `${val.prize_1}|${val.prize_1_num}`
                this.baseInfo.prize_2 = `${val.prize_2}|${val.prize_2_num}`
                this.baseInfo.prize_3 = `${val.prize_3}|${val.prize_3_num}`
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        showNumHandler(key) {
            this.showNum = true
            this.group_edit.now_edit = key
        },
        onConfirm_num(value) {
            this.group_edit[this.group_edit.now_edit] = value
            this.showNum = false
        },
        onConfirm_start(value) {
            this.baseInfo.redeem_start = new Date(value).Format('yyyy-MM-dd')
            this.showTimeStart = false
        },
        onConfirm_end(value) {
            this.baseInfo.redeem_end = new Date(value).Format('yyyy-MM-dd')
            this.showTimeEnd = false
        },
        submit() {
            for (const key in this.baseInfo) {
                if (key === 'day' || key === 'definite_day' || key === 'amount') {
                    continue
                }
                if (this.baseInfo[key] === '') {
                    Toast({ type: 'danger', message: '全部项都为必填' })
                    console.error('全部项都为必填', this.baseInfo, `[ ${key} ]为空`)
                    return
                }
            }
            this.$store.commit('SAVELASTDATA', this.baseInfo)
            this.$router.push({ name: 'time' })
        }
    }
}

// eslint-disable-next-line
Date.prototype.Format = function(fmt) {
    var o = {
        'M+': this.getMonth() + 1,
        'd+': this.getDate(),
        'H+': this.getHours(),
        'm+': this.getMinutes(),
        's+': this.getSeconds(),
        'S+': this.getMilliseconds()
    }
    // 因为date.getFullYear()出来的结果是number类型的,所以为了让结果变成字符串型，下面有两种方法：
    if (/(y+)/.test(fmt)) {
        // 第一种：利用字符串连接符“+”给date.getFullYear()+""，加一个空字符串便可以将number类型转换成字符串。
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
            // 第二种：使用String()类型进行强制数据类型转换String(date.getFullYear())，这种更容易理解。
            // eslint-disable-next-line
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(String(o[k]).length)))
        }
    }
    return fmt
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  .header {
    width: 95%;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    span {
      padding-right: 10px;
    }
  }
  .top {
    display: flex;
    // justify-content: space-between;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    .icon {
      width: 50%;
      img {
        width: 100%;
      }
    }
    .wz {
      font-size: 23px;
      font-weight: bold;
    }
    .rule-btn {
      width: 5%;
      margin-top: -50px;
      img {
        width: 100%;
      }
    }
  }
  .cont {
    width: 100%;
    .list {
      border: 2px solid #487cfb;
      display: flex;
      justify-content: space-around;
      padding: 15px 0;
      margin: 15px 10px;
      border-radius: 6px;
    }
    .prise {
      font-size: 14px;
      color: #b6b6b6;
    }
    .type {
      font-size: 16px;
      font-weight: bold;
      color: #487cfb;
    }
    .name {
      border: none;
    }
    .num {
      font-size: 14px;
      color: #487cfb;
      .show {
        color: #b6b6b6;
        padding-left: 5px;
      }
    }
    .rule {
      width: 94%;
      height: 100px;
      padding: 5px;
      box-sizing: border-box;
    }
    .gz-wz {
      padding: 0px 10px;
      font-size: 14px;
      color: #b6b6b6;
    }
    .convert {
      justify-content: space-between;
      padding: 15px;
      box-sizing: border-box;
    }
    .select {
      width: 17px;
    }
    .next-btn {
      width: 95%;
      margin: 0 auto;
      padding: 15px 0;
      background: #487cfb;
      color: #fff;
      text-align: center;
      margin-bottom: 2%;
      font-size: 14px;
      border-radius: 6px;
    }
    .back {
      text-align: center;
      color: #487cfb;
      font-size: 14px;
    }
  }
}
</style>
